<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>DOM操作</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
        <style>
            .demo{
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <button id="btn">点我创建input框</button>
        </div>

        <script type="text/javascript">
            //获取button，给button添加点击事件
            const btn = document.getElementById("btn")
            btn.onclick = ()=>{
                //创建一个input框
                const input = document.createElement('input')
                input.className = 'demo'
                input.value =99
                // 把获取焦点放在添加input框前面就不会生效，因为这时创建，页面上还没有这个输入框
                //input.focus()
                //给div添加输入框
                document.getElementById('root').appendChild(input)
                //获取焦点
                input.focus()
            }
        </script>

        
    </body>
</html>